import React, { memo, useEffect } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { DjRadioWrap } from "./style";
import { getProgramRecommends } from "./store/actionType";
import DjProgramWrap from "@/components/djradio/djProgram";
import DjToplistsWrap from "@/components/djradio/djToplists";
import DjCategory from "@/components/djradio/djCategories";
import DjRadioBanner from "./djRadioBanner";

export default memo(function Djradio() {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getProgramRecommends());
  }, [dispatch]);

  const { djProgramRecommends } = useSelector(
    (state) => ({
      djProgramRecommends: state.getIn(["djPlaylists", "djProgramRecommend"]),
    }),
    shallowEqual
  );

  return (
    <DjRadioWrap>
      <div className="wrap-v2 dj-box">
        <DjRadioBanner />
        <div className="djPro">
          <DjProgramWrap djProgramRecommends={djProgramRecommends} />
          <DjToplistsWrap />
        </div>
        <DjCategory categoryId={2001} text={"创作翻唱"} />
        <DjCategory categoryId={2} text={"音乐推荐"} />
        <DjCategory categoryId={3} text={"情感"} />
        <DjCategory categoryId={11} text={"知识"} />
        <DjCategory categoryId={6} text={"生活"} />
      </div>
    </DjRadioWrap>
  );
});
